<template>
  <div class="detail">
    <el-tabs v-model="listQuery.type" type="border-card" @tab-click="clickTabPane">
      <el-tab-pane v-for="(item, index) in operations" :key="'business_user_' + item.name" :label="item.label" :name="item.name">
        <el-table
          :key="tableKey + item.name + index"
          v-loading="listLoading"
          :data="userList"
          border
          fit
          highlight-current-row
          style="width: 100%;margin-top: 20px"
        >
          <el-table-column label="头像" width="80" align="center">
            <template slot-scope="{ row: { avatar_url }}">
              <img
                v-if="avatar_url === ''"
                style="width: 50px"
                src="@/assets/static/image/noImg.png"
              >
              <a v-else :href="avatar_url" target="_blank">
                <img
                  :src="avatar_url"
                  style="width: 50px"
                >
              </a>
            </template>
          </el-table-column>
          <el-table-column label="nick_name" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.nick_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="create_time"
            prop="create_time"
            width="160"
            align="center"
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="handlePagination"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getBusinessOperationUser } from '@/api/business'

export default {
  name: 'BusinessUserDetail',
  components: { Pagination },
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      tableKey: 'business_user',
      listLoading: false,
      userList: [],
      listQuery: {
        page: 1,
        limit: 20,
        type: 'advisory'
      },
      total: 0,
      operations: [
        {
          label: '咨询用户',
          name: 'advisory'
        }
      ]
    }
  },
  methods: {
    clickTabPane() {
      this.toDefault()
      this.getUserList()
    },
    handlePagination() {
      this.getUserList()
    },
    getUserList() {
      this.listLoading = true
      this.listQuery.id = this.id
      getBusinessOperationUser(this.listQuery).then(response => {
        const { data, total } = response
        // console.log(data)
        this.total = total
        this.userList = data
        this.listLoading = false
      })
    },
    toDefault() {
      this.total = 0
      this.userList = []
      this.listQuery.page = 1
      this.listQuery.limit = 20
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
